<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">全部订单</block>
		</cu-custom>
		<view class="fixed">
			<scroll-view slot="top" scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub text-blue" :class="index==tabCur?'cur ':''"
						v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index">
						{{item}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view style="top: unset !important; margin-top: 90rpx;">
			<view v-for="(order,orderIndex) in list" :key="orderIndex" class="solid-bottom bg-white">
				<view class="flex justify-between align-center padding-top padding-right-sm">
					<view class="cu-bar" style="min-height: 50rpx;">
						<view class="action">
							<text class="cuIcon-title text-blue"></text>
						</view>
						<view class="action">
							<view>{{order.id}}</view>
						</view>
					</view>
					<view>
						<view class='cu-tag radius ' :class="order.payStatus =='1' ? 'line-blue' :'line-red'">
							{{order.payStatus =='1' ? '已支付' :'未支付'}}
						</view>
						<view class='cu-tag radius line-blue'>{{order.statusDesc}}</view>
					</view>

				</view>
				<view class="flex p-xs mb-sm" v-for="(orderItem,orderItemIndex) in order.orderItemList"
					:key="orderItemIndex">
					<view class="flex-sub padding-lr-sm padding-top-sm"> <img :src="orderItem.picUrl" alt=""
							style="height:100px;width:100px;" />

					</view>
					<view class="flex-twice padding-top-sm padding-lr-xs">
						<view class="hx-overflow-2">{{orderItem.spuName}}</view>
						<view class="text-grey" v-if="orderItem.specsInfo">{{orderItem.specsInfo}}</view>
						<view class="margin-tb-xs">
							<view class="cu-tag" v-if="orderItem.status > '0'"
								:class="orderItem.status == '1' ? 'bg-red' :''">
								{{orderItem.statusDesc}}
							</view>
						</view>

					</view>
				</view>
				<view class="padding-lr-sm">
					<view>
						实收金额 ：<text class="text-red text-price text-xxl">{{order.payPrice}}</text><text
							class="text-grey text-sm padding-lr-xs">(含运费)</text>
					</view>
				</view>
				<view class="flex border justify-end padding-lr-sm">
					<orderOperation :orderInfo="order" type="list"></orderOperation>
				</view>

			</view>
		</view>
		<view class="cu-load bg-gray" :class="isLoad?'loading':'over'">
		</view>
	</view>
</template>

<script>
	import orderOperation from '@/components/order-operation/index'
	import {
		getPage
	} from '@/api/mall/orderinfo.js'
	export default {
		components: {
			orderOperation
		},
		data() {
			return {
				tabCur: 0,
				tabList: ['全部', '待付款', '待发货', '待收货', '待评价'],
				queryParams: {},
				status: 0,
				page: {
					total: 0,
					currentPage: 1,
					pageSize: 10,
					descs: 'create_time',
				},
				list: [],
				isLoad: true
			}
		},
		onLoad(option) {
			if (option.status) {
				this.status = option.status;
				this.tabCur = option.status;
			}
		},
		onShow() {
			this.refreshPage()
		},
		onReachBottom() {
			if (this.isLoad) {
				this.page.currentPage = this.page.currentPage + 1;
				this.initPage();
			}
		},
		onPullDownRefresh() {
			// 在当前页面显示导航条加载动画。
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#ff0000',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
			this.refreshPage();
			uni.hideNavigationBarLoading(); // 在当前页面隐藏导航条加载动画。
			uni.stopPullDownRefresh();
		},

		methods: {
			initPage() {
				let params = {
					current: this.page.currentPage,
					size: this.page.pageSize,
					descs: this.page.descs,
					status: this.status == 0 ? '' : this.status,
				}
				getPage(Object.assign(params, this.queryParams)).then(res => {
					let orderInfoList = res.data.records;
					this.list = [...this.list, ...orderInfoList];
					if (orderInfoList.length < this.page.pageSize) {
						this.isLoad = false;
					}
				})
			},
			refreshPage() {
				this.isLoad = true;
				this.list = [];
				this.page.currentPage = 1;
				this.initPage();
			},

			tabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.status = e.currentTarget.dataset.id;
				this.refreshPage();
			}
		}
	}
</script>

<style>
</style>
